<!-- 提现 -->
<template>
	<view class="page">
		<status-bar title='提现'></status-bar>
		<view class="row bgWhite p-top30 p-left20 d-flex j-sa" v-if="allaccount">			  
			  <view class="p-bot20 size30 p-re color66" :class="{active:account == 0}"  v-if="cashMethodArr.bankCard == 1" @click="selct(0)">银行卡</view>
			  <view class="p-bot20 size30 p-re color66" :class="{active:account == 1}" v-if="cashMethodArr.redEnvelopes == 1" @click="selct(1)">微信零钱</view>
			  <view class="p-bot20 size30 p-re color66" :class="{active:account == 2}" v-if="cashMethodArr.balance == 1" @click="selct(2)">账户余额</view>
			  
		</view>
		
		<!--  银行卡 -->
		<block v-if="cashMethodArr.bankCard == 1">
			<view class="wdw_bank" v-if="account == 0">
				<view class="txt2" style="margin-bottom: 0.4rem;">到银行卡</view>
				<view class="add_card" v-if="pageCard.contract_state != 1" @click="toUrl('/moneyPage/capital/addBank')">
					<image :src="staticUrl + '/images/plus_ico.png'" class="plus_ico"></image>
					<view class="txt">点击添加银行卡</view>
				</view>
				<navigator url="/moneyPage/capital/addBank" hover-class="none" v-else>
					<view class="txt1">{{pageCard.bankName}}（尾号{{pageCard.bankCard.substr(pageCard.bankCard.length - 4,pageCard.bankCard.length)}}）</view>
				</navigator>
			</view>
		</block>
		
		<!--  微信零钱 -->
		<block v-if="cashMethodArr.redEnvelopes == 1">
			<view class="wdw_bank" v-if="account == 1">
				 <text class="size30">到微信零钱</text>
			</view>
		</block>
		
		<!--  账户余额 -->
		<block v-if="cashMethodArr.balance == 1">
			<view class="wdw_bank" v-if="account == 2">
				<view class="h6">到账户余额</view>
				<view class="h5 m-top10">当前余额: {{money}}</view>
			</view>
		</block>
		
		<view class="wdw_form">
			<view class="wdw_form_box">
				<view class="f_032">提现金额</view>
				<view class="wdw_c">
					￥<view class="wdw_c_c">
						<input type="number" maxlength="8" v-model="number" id="wdw_money" placeholder="请填写提金额" class="wdw_input" @input="change" />
					</view>
					<text class="wdw_btn" @click="alldeposit">全部提现</text>
				</view>
				<view class="wdw_tip" v-if='!number'>当前账户可提现{{nameDefinition.profitTitle}}：<text>￥{{money}}</text></view>
				<view class="wdw_tip" v-else>{{ tip }}</view>
			</view>
			<view class="btn3 thmeBg" :class="{disabled:disabled}" :style="{'--color': color}" @click="withdraw">提现</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	var that, fastClick = true;
	export default {
		data() {
			return {

				disabled: true,
				staticUrl: this.staticUrl,
				
				
				
				pageCard: '',
				number: '',
				min: 0,
				rate: 0,
				tip: '',
				money: 0,
				
				account:0,   // 提现账户 0 银行卡 1 微信零钱 2 账户余额,
				allaccount:true,   // 提现渠道大于1 
				cashMethodArr:'',
			}
		},
		onShow() {

		},
		onLoad(e) {
			let that = this;
			if(e.cashMethodArr) that.cashMethodArr = JSON.parse(e.cashMethodArr);
			
			if(that.cashMethodArr.balance == 1 && that.cashMethodArr.bankCard == 0 && that.cashMethodArr.redEnvelopes == 0){
				   that.allaccount = false;
				   that.account = 2;
			}else if(that.cashMethodArr.balance == 0 && that.cashMethodArr.bankCard == 1 && that.cashMethodArr.redEnvelopes == 0){
				   that.allaccount = false;
				   that.account = 0;
			}else if(that.cashMethodArr.balance == 0 && that.cashMethodArr.bankCard == 0 && that.cashMethodArr.redEnvelopes == 1){
				   that.allaccount = false;
				   that.account = 1;
			}else{
				that.allaccount = true;
			}
			
			
			that.initialize()
			
		},
		onShareAppMessage(option) {
			let shareData = this.share;
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + that.vid,
				imageUrl: shareData.imageUrl
			}
		},
		methods: {
			selct(inx){
				let that = this;
				that.account = inx;
			},
			change(e) {
				let that = this;
				let val = e.detail.value
				that.disabled = false
				that.reg(val)
			},
			reg(val) {
				let that = this;
				that.disabled = false
				if (val >= that.min) {
					if (val > that.money) {
						that.disabled = true
						that.tip = '当前账户可提现余额：' + that.money
					} else {
						if (val == 0) {
							that.disabled = true
						}
						that.tip = '到账扣除' + parseFloat(that.rate * val).toFixed(2) + '的服务费用（费率' + that.rate * 100 + '%）'
					}
				} else {
					that.disabled = true
					that.tip = '最小提现金额：' + that.min
				}
			},
			initialize: function() { //页面初始化，获取银行卡信息
			   let that = this;
				that.$http.post({
					url: '/singleSaleApi/findBankCard',

				}).then(res => {
					if (res.errcode == 100) {
						that.pageCard = res.data;
						that.money = parseFloat(res.data.money).toFixed(2)
						that.min = parseFloat(res.data.cash_min)
						that.rate = parseFloat(res.data.cash_rate)
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			},
			alldeposit: function() { //全部提现
			   let that = this;
				that.number = that.money
				that.reg(that.number)
			},
			withdraw: function() { //提现
				let that = this;
				if (!that.disabled) {
					if (that.account == 0 && !that.pageCard.bankCard) {
						uni.showToast({
							icon: "none",
							title: "请选择卡号",
							duration: 1500
						})
						return
					}
					if (!fastClick) {
						return
					}
					fastClick = false
					uni.showLoading({
						mask: false,
						title: '请稍等'
					})
					that.$http.post({
						url: '/singleSaleApi/CommissionWithdrawal',
						data: {
							v_id: that.vid,
							money: that.number,
							bankCard: that.pageCard.bankCard,
							cash_method:that.account
						}
					}).then(res => {
						if (res.status) {
							uni.showModal({
								content: res.msg,
								cancelText: "返回首页",
								confirmText: "继续提现",
								success: function(res2) {
									if (res2.confirm) {
										that.initialize()
										that.number = ''
									} else if (res2.cancel) {
										that.backHome()
									}
								}
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg,
								duration: 2000
							})
						}
						uni.hideLoading()
						fastClick = true
					})
				}

			}
		},
		computed: {
			...mapState(['vid','bid','share','nameDefinition','color']),
			service_charge: function() {
				// let serviceCharge
				// if(that.cash_rate && that.number){
				// 	serviceCharge = (parseFloat(that.number) * (that.cash_rate)/100).toFixed(2)
				// 	return serviceCharge
				// }

			}
		}
	}
</script>

<style scoped lang="scss">
	.active{
		color:#ff4b4e;
		font-weight: bold;
	}
	.active::after{
		content: "";
		width:36rpx;
		height: 4rpx;
		background: #ff4b4e;
		position: absolute;
		bottom: 0;
		left:50%;
		transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
	}
	.page {
		background-color: #F8F8F8;
		.wdw_bank{
			margin-bottom: 30upx;
			padding: 30upx;
			background: #ffffff;
			.txt2{
				font-size: 28rpx;
				color: #666666;
			}
			.add_card{
				border: 1px dashed #C0C0C0;
				border-radius: 8rpx;
				padding: 20rpx;
				text-align: center;
				.plus_ico{
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
					opacity: 0.6;
				}
				.txt{
					color: #AFAFAF;
				}
				.plus_ico{
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 20rpx;
					opacity: 0.6;
				}
			}
			.txt1{
				font-size: 32rpx;
			}
		}
		.wdw_form_box{
			border-radius: 10px;
			margin-bottom: 30upx;
			padding: 30upx;
			background: #ffffff;
			.wdw_c{
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				align-items: center;
				font-size: 36upx;
				.wdw_c_c{
					margin: 50upx 0;
					font-size: 36upx;
					.wdw_input{
						width: 500upx;
						border: none;
						border-radius: 0;
						background: none;
						appearance: none;
						-webkit-appearance: none;
						font-size: 36upx;
						font-family: arial;
						color: #333333;
					}
				}
				.wdw_btn{
					font-size: 28upx;
					color: #ff4b4e;
				}
			}
			.wdw_tip{
				font-size: 28upx;
				font-family: arial;
				color: #999999;
			}
		}
		.wdw_input::-webkit-input-placeholder{
			position: relative;
			top: -2px;
		}
	}
	.disabled {
		background-color: #999999 !important;
	}
</style>
